<!--  -->
<template>
  <div class="Login">
    <div class="container">
      <!-- 走马灯 -->
      <el-carousel>
        <el-carousel-item v-for="(item, index) in list" :key="index">
          <img :src="item.imgsrc" alt="" />
        </el-carousel-item>
      </el-carousel>
      <div class="login-wrap">
        <div class="title">欢迎登陆</div>
        <el-form :model="userform" :rules="rules" ref="refForm">
          <el-form-item prop="user_name">
            <el-input
              prefix-icon="el-icon-user"
              v-model="userform.user_name"
              placeholder="邮箱/手机号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="user_password">
            <el-input
              prefix-icon="el-icon-lock"
              v-model="userform.user_password"
              placeholder="密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item prop="captcha">
            <el-input
              prefix-icon="el-icon-key"
              v-model="userform.captcha"
              placeholder="验证码"
            ></el-input>
            <img
              src="http://192.168.0.182:3008/api/user/captcha"
              ref="imgcode"
              @click="change"
            />
          </el-form-item>
          <el-form-item label>
            <el-button
              type="primary"
              style="width: 100%"
              @click="successfn('refForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import tools from "@/utils/index";
import { UserLogin, alluserlist } from "@/api/index";
console.log(alluserlist);
export default {
  //import引入的组件需要注入到components对象中才能使用
  components: {},
  data() {
    //这里存放数据
    var rex = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱/手机号"));
      } else {
        if (!(tools.rexPhone.test(value) || tools.rexemali.test(value))) {
          callback(new Error("请输入正确的邮箱/手机号"));
        }
        callback();
      }
    };
    return {
      rules: {
        user_name: [{ validator: rex, trigger: "blur" }],
        user_password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 3 到 12个字符", trigger: "blur" },
        ],
        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      list: [
        {
          id: 1,
          imgsrc:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=654711790,2598870033&fm=26&gp=0.jpg",
        },
        {
          id: 2,
          imgsrc:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2795030054,88102996&fm=26&gp=0.jpg",
        },
        {
          id: 3,
          imgsrc:
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3001266437,2977997650&fm=26&gp=0.jpg",
        },
      ],
      userform: {
        user_name: "18567112962",
        user_password: "",
        captcha: "",
      },
    };
  },
  methods: {
    change() {
      this.$refs.imgcode.src =
        "http://192.168.0.182:3008/api/user/captcha?t=" + new Date().getTime();
    },
    successfn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          UserLogin(this.userform).then((res) => {
            console.log(res);
            if (res.status == 200) {
              sessionStorage.setItem("token", res.token);
              this.$router.push("/admin/welcome");
            }
            // localStorage.setItem("token",res.token);
          });
        } else {
          alert("验证码错误");
          return false;
        }
      });
    },
  },
  // mounted() {
  //   alluserlist().then((res) => {
  //     console.log(res.data);
  //     console.log(res.data[8].user_name);
  //     for (var i = 0; i < res.data.length; i++) {
  //       if(this.userform.user_name==res.data[i].user_name){
  //         console.log(111);
  //       }
  //     }
  //   });
  //   console.log(this.userform.user_name);
  // },
};
</script>
<style lang="less">
.Login {
  width: 100%;
  height: 98vh;
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  .container {
    height: 400px;
    width: 800px;
    background: #fff;
    border-radius: 6px;
    display: flex;
    .el-carousel {
      width: 400px;
      height: 400px;
      overflow: hidden;
      .el-carousel__container {
        height: 400px;
      }
      img {
        width: 400px;
        height: 400px;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
      }
    }
    .login-wrap {
      width: 340px;
      height: 400px;
      padding: 0 30px;
      .title {
        height: 100px;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        line-height: 100px;
      }
      .el-form-item__content {
        display: flex;
        justify-content: space-between;
      }
      img {
        height: 40px;
      }
    }
  }
}
</style>